<template>
  <component
    :is="as"
    class="scroll-num"
    :class="{ 'border-animate': showAnimate }"
    :style="{ '--i': i, '--delay': index }"
    @animationend="showAnimate = false"
  >
    <ul ref="ul" class="animate uu">
      <li>{{ showAnimate ? getNum()[0] : 0 }}</li>
      <li>{{ showAnimate ? getNum()[1] : 1 }}</li>
      <li>{{ showAnimate ? getNum()[2] : 2 }}</li>
      <li>{{ showAnimate ? getNum()[3] : 3 }}</li>
      <li>{{ showAnimate ? getNum()[4] : 4 }}</li>
      <li>{{ showAnimate ? getNum()[5] : 5 }}</li>
      <li>{{ showAnimate ? getNum()[6] : 6 }}</li>
      <li>{{ showAnimate ? getNum()[7] : 7 }}</li>
      <li>{{ showAnimate ? getNum()[8] : 8 }}</li>
      <li>{{ showAnimate ? getNum()[9] : 9 }}</li>
      <li>{{ showAnimate ? getNum()[0] : 0 }}</li>
    </ul>

    <svg width="0" height="0">
      <filter id="blur">
        <feGaussianBlur in="SourceGraphic" :stdDeviation="`0 ${blur}`" />
      </filter>
    </svg>
  </component>
</template>

<script>
export default {
  name: 'ScrollNum',
  props: {
    as: {
      type: String,
      default: 'div'
    },
    i: {
      type: Number,
      default: 0,
      validator: v => v < 10 && v >= 0 && Number.isInteger(v)
    },

    blur: {
      type: Number,
      default: 2
    },
    state: {
      type: Boolean,
      default: false
    },
    index: {
      type: Number,
      default: 0
    },

  },
  data: () => ({
    showAnimate: false,
    delay: 1,
  }),
  watch: {
    state () {
      console.log(99999)
      this.showAnimate = this.state
      if (!this.showAnimate) {
        let liList = document.querySelectorAll('.uu')
        let index = 0
        let t = null
        stop(index)
        function stop (index) {
          console.log(index)
          clearTimeout(t)

          liList[index].className = 'a2 uu'

          if (index >= liList.length - 1) {
            clearTimeout(t)
            return false
          } else {
            index++
            t = setTimeout(() => {
              stop(index)
            }, 500)
          }
        }


      } else {
        let liList = document.querySelectorAll('.uu')
        liList[0].className = 'animate uu'
        liList[1].className = 'animate uu'
        liList[2].className = 'animate uu'
        liList[3].className = 'animate uu'
        liList[4].className = 'animate uu'
        liList[5].className = 'animate uu'

      }
    },
  },
  mounted () {
  },
  methods: {
    getNum () {
      var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
      var temp = []; //temp存放生成的随机数组        　
      var count = arr.length;
      for (var i = 0; i < count; i++) {
        var num = Math.floor(Math.random() * arr.length); //生成随机数num
        temp.push(arr[num]); //获取arr[num]并放入temp
        arr.splice(num, 1);
      }
      return temp;

    },
  },
  beforeDestroy () { clearTimeout(this.timer) }
}
</script>

<style scoped>
.scroll-num {
  width: 133px;
  height: 133px;
  border-radius: 12px;
  color: #ac3037;
  font-size: 70px;
  line-height: 133px;
  text-align: center;
  overflow: hidden;
  background: #fffcd9;
}

.animate {
  animation: move 0.5s linear infinite;
}
.a2 {
  animation: bounce-in-down 1s calc(var(--delay) * 0s) forwards;
}
/* .animate {
  animation: move 0.3s linear infinite;
} */
/* .border-animate {
  animation: enhance-bounce-in-down 1s calc(var(--delay) * 1s) forwards;
} */

ul {
  transform: translateY(calc(var(--i) * -9.09%));
}

@keyframes move {
  from {
    transform: translateY(-90%);
    filter: url(#blur);
  }
  to {
    transform: translateY(1%);
    filter: url(#blur);
  }
}

@keyframes bounce-in-down {
  from {
    transform: translateY(calc(var(--i) * -9.09% - 7%));
    filter: none;
  }
  25% {
    transform: translateY(calc(var(--i) * -9.09% + 3%));
  }
  50% {
    transform: translateY(calc(var(--i) * -9.09% - 1%));
  }
  70% {
    transform: translateY(calc(var(--i) * -9.09% + 0.6%));
  }
  85% {
    transform: translateY(calc(var(--i) * -9.09% - 0.3%));
  }
  to {
    transform: translateY(calc(var(--i) * -9.09%));
  }
  /* from {
    transform: translateY(-90%);
    filter: url(#blur);
  }
  to {
    transform: translateY(calc(var(--i) * -9.09%));
  } */
}

/* @keyframes enhance-bounce-in-down {
  25% {
    transform: translateY(8%);
  }
  50% {
    transform: translateY(-4%);
  }
  70% {
    transform: translateY(2%);
  }
  85% {
    transform: translateY(-1%);
  }
  to {
    transform: translateY(0);
  }
} */
</style>

